<script setup lang="ts">
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

// 导入商家图片
import burgerKingImg from '@/assets/img/category/burger_king.png'
import mcdonaldsImg from '@/assets/img/category/mcdonalds.png'
import pizzaHutImg from '@/assets/img/category/pizza_hut.png'
import kfcImg from '@/assets/img/category/kfc.png'
import starbucksImg from '@/assets/img/category/starbucks.png'

const router = useRouter()
const route = useRoute()
const categoryName = ref('')

// 跳转到餐厅详情
const navigateToRestaurant = (id: number) => {
  router.push({ name: 'restaurant', params: { restaurantId: id } })
}

// 根据路由参数获取分类名称
onMounted(() => {
  const categoryId = route.params.categoryId
  if (categoryId === '1') categoryName.value = '美食'
  else if (categoryId === '2') categoryName.value = '快餐便当'
})
</script>

<template>
  <!-- 顶部标题栏 -->
  <div class="bg-primary text-white py-4 text-center font-bold text-lg sticky top-0 z-10">
    商家列表
  </div>

  <div class="pb-16">
    
    
    <div class="mt-4 px-4">
      <div class="flex flex-wrap gap-2">
        <div class="border border-gray-200 rounded-full px-3 py-1 text-sm">
          销量 1
        </div>
        <div class="border border-gray-200 rounded-full px-3 py-1 text-sm">
          销量 2
        </div>
        <div class="border border-gray-200 rounded-full px-3 py-1 text-sm">
          销量 3
        </div>
        <div class="border border-gray-200 rounded-full px-3 py-1 text-sm">
          销量 4
        </div>
        <div class="border border-gray-200 rounded-full px-3 py-1 text-sm">
          销量 5
        </div>
      </div>
    </div>
    
    <div class="mt-4 space-y-4 px-4">
      <!-- 汉堡王 -->
      <div class="bg-white rounded-lg shadow-md cursor-pointer" @click="navigateToRestaurant(1)">
        <div class="flex p-3">
          <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
            <img :src="burgerKingImg" class="w-full h-full object-cover" alt="汉堡王">
          </div>
          <div class="ml-3 flex-1">
            <div class="flex justify-between">
              <h3 class="font-bold">汉堡王（欣都龙城店）</h3>
              <span class="text-primary">¥20起送</span>
            </div>
            <div class="mt-1 text-sm text-gray-500 flex">
              <span class="text-primary mr-1">4.9</span>
              <span class="mr-2">月售999+</span>
              <span>35分钟</span>
            </div>
            <div class="mt-1 text-xs text-gray-500 flex">
              <div class="text-nowrap truncate">汉堡/炸鸡/薯条</div>
              <div class="ml-auto">3.2km</div>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-100 px-3 py-2 flex text-xs">
          <div class="text-red-500 bg-red-50 px-1 mr-2">折扣</div>
          <span class="text-gray-500 truncate">新用户下单立减17元，更多优惠等你来享</span>
        </div>
      </div>
      
      <!-- 麦当劳 -->
      <div class="bg-white rounded-lg shadow-md cursor-pointer" @click="navigateToRestaurant(2)">
        <div class="flex p-3">
          <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
            <img :src="mcdonaldsImg" class="w-full h-full object-cover" alt="麦当劳">
          </div>
          <div class="ml-3 flex-1">
            <div class="flex justify-between">
              <h3 class="font-bold">麦当劳（中汇店）</h3>
              <span class="text-primary">¥15起送</span>
            </div>
            <div class="mt-1 text-sm text-gray-500 flex">
              <span class="text-primary mr-1">4.7</span>
              <span class="mr-2">月售1200+</span>
              <span>25分钟</span>
            </div>
            <div class="mt-1 text-xs text-gray-500 flex">
              <div class="text-nowrap truncate">汉堡/薯条/可乐</div>
              <div class="ml-auto">1.5km</div>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-100 px-3 py-2 flex text-xs">
          <div class="text-red-500 bg-red-50 px-1 mr-2">折扣</div>
          <span class="text-gray-500 truncate">买一送一，限时优惠</span>
        </div>
      </div>
      
      <!-- 必胜客 -->
      <div class="bg-white rounded-lg shadow-md cursor-pointer" @click="navigateToRestaurant(3)">
        <div class="flex p-3">
          <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
            <img :src="pizzaHutImg" class="w-full h-full object-cover" alt="必胜客">
          </div>
          <div class="ml-3 flex-1">
            <div class="flex justify-between">
              <h3 class="font-bold">必胜客（霖雨路店）</h3>
              <span class="text-primary">¥30起送</span>
            </div>
            <div class="mt-1 text-sm text-gray-500 flex">
              <span class="text-primary mr-1">4.8</span>
              <span class="mr-2">月售850+</span>
              <span>40分钟</span>
            </div>
            <div class="mt-1 text-xs text-gray-500 flex">
              <div class="text-nowrap truncate">披萨/意面/小吃</div>
              <div class="ml-auto">2.8km</div>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-100 px-3 py-2 flex text-xs">
          <div class="text-red-500 bg-red-50 px-1 mr-2">折扣</div>
          <span class="text-gray-500 truncate">满100减20，全场通用</span>
        </div>
      </div>
      
      <!-- 肯德基 -->
      <div class="bg-white rounded-lg shadow-md cursor-pointer" @click="navigateToRestaurant(4)">
        <div class="flex p-3">
          <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
            <img :src="kfcImg" class="w-full h-full object-cover" alt="肯德基">
          </div>
          <div class="ml-3 flex-1">
            <div class="flex justify-between">
              <h3 class="font-bold">肯德基（嘉年华店）</h3>
              <span class="text-primary">¥15起送</span>
            </div>
            <div class="mt-1 text-sm text-gray-500 flex">
              <span class="text-primary mr-1">4.6</span>
              <span class="mr-2">月售1500+</span>
              <span>20分钟</span>
            </div>
            <div class="mt-1 text-xs text-gray-500 flex">
              <div class="text-nowrap truncate">炸鸡/汉堡/蛋挞</div>
              <div class="ml-auto">0.8km</div>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-100 px-3 py-2 flex text-xs">
          <div class="text-red-500 bg-red-50 px-1 mr-2">折扣</div>
          <span class="text-gray-500 truncate">周二会员日，半价优惠</span>
        </div>
      </div>
      
      <!-- 星巴克 -->
      <div class="bg-white rounded-lg shadow-md cursor-pointer" @click="navigateToRestaurant(5)">
        <div class="flex p-3">
          <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
            <img :src="starbucksImg" class="w-full h-full object-cover" alt="星巴克">
          </div>
          <div class="ml-3 flex-1">
            <div class="flex justify-between">
              <h3 class="font-bold">星巴克（同德店）</h3>
              <span class="text-primary">¥25起送</span>
            </div>
            <div class="mt-1 text-sm text-gray-500 flex">
              <span class="text-primary mr-1">4.5</span>
              <span class="mr-2">月售700+</span>
              <span>30分钟</span>
            </div>
            <div class="mt-1 text-xs text-gray-500 flex">
              <div class="text-nowrap truncate">咖啡/甜点/三明治</div>
              <div class="ml-auto">1.2km</div>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-100 px-3 py-2 flex text-xs">
          <div class="text-red-500 bg-red-50 px-1 mr-2">折扣</div>
          <span class="text-gray-500 truncate">新用户首杯半价</span>
        </div>
      </div>
    </div>
  </div>

  <NavBar />
</template>